<template>
  <div class="container">
    <div class="top">
      <div>
        <el-input v-model="select" size="small" placeholder="查找用户" prefix-icon="el-icon-search"
                  style="width: 300px;margin: 10px 0">
        </el-input>
        <el-button size="small" type="success"
                   icon="el-icon-search"
                   style="margin-left: 20px"
                   @click="SelectByName">查询
        </el-button>
      </div>
      <div>
        <el-button size="small" type="primary"
                   icon="el-icon-plus"
                   style="margin: 10px 20px"
                   @click="addUser">添加
        </el-button>
        <el-button size="small" type="danger"
                   icon="el-icon-plus"
                   style="margin: 10px 20px"
                   @click="DeleteUserAll">批量删除
        </el-button>
      </div>
      <el-dialog title="信息" :visible.sync="dialogTableVisible">
        <el-table :data="gridData">
          <el-table-column property="creat" label="创建日期" width="100"></el-table-column>
          <el-table-column property="username" label="姓名" width="80"></el-table-column>
          <el-table-column property="address" label="地址" width="150"></el-table-column>
          <el-table-column property="pid" label="身份证号" width="170"></el-table-column>
          <el-table-column property="birthday" label="生日" width="100"></el-table-column>
          <el-table-column property="telephone" label="电话" width="130"></el-table-column>

        </el-table>
      </el-dialog>
      <el-dialog :title="title" :visible.sync="dialogFormVisible">
        <el-form :rules="rules"
                 element-loading-text="正在添加..."
                 element-loading-spinner="el-icon-loading"
                 element-loading-background="rgba(0, 0, 0, 0.8)"
                 :model="form"
                 ref="form">
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="姓名" prop="username">
                  <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item prop="birthday" label="出生日期">
                  <div class="block">
                    <el-date-picker
                        v-model="form.birthday"
                        type="date"
                        placeholder="选择生日日期">
                    </el-date-picker>
                  </div>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item label="电话号码" prop="telephone">
                  <el-input v-model="form.telephone" autocomplete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item prop="address" label="地址">
                  <el-select v-model="form.address" placeholder="请选择地址">
                    <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.label">
                    </el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item prop="pid" label="身份证号">
                  <el-input v-model="form.pid" autocomplete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple">
                <el-form-item prop="password" label="密码">
                  <el-input v-model="form.password" autocomplete="off"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="commit">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-table
        :data="tableData"
        ref="multipleTable"
        tooltip-effect="dark"
        @selection-change="handleSelectionChange"
        style="width: 100%">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          label="创建时间"
          width="130">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.creat }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="姓名"
          width="120">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>姓名: {{ scope.row.username }}</p>
            <p>住址: {{ scope.row.address }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.username }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>
      <el-table-column
          label="头像"
          width="110">
        <template slot-scope="scope">
          <span style="margin-left: 10px"><img :src="scope.row.image" width="60"></span>
        </template>
      </el-table-column>
      <el-table-column
          label="生日"
          width="150">
        <template slot-scope="scope">
          <i class="el-icon-time"></i>
          <span style="margin-left: 10px">{{ scope.row.birthday }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="电话号码"
          width="150">
        <template slot-scope="scope">
          <i class="el-icon-phone"></i>
          <span style="margin-left: 10px">{{ scope.row.telephone }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="地址"
          width="170">
        <template slot-scope="scope">
          <i class="el-icon-location"></i>
          <span style="margin-left: 10px">{{ scope.row.address }}</span>
        </template>
      </el-table-column>
      <el-table-column
          label="身份证号"
          width="192">
        <template slot-scope="scope">
          <i class="el-icon-s-custom"></i>

          <span style="margin-left: 10px">{{ scope.row.pid }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑
          </el-button>
          <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  name: "user",
  data() {
    return {
      title: "添加用户",
      select: "曹秀英",
      tableData: [{
        "customerID": 1,
        "username": "idusfohowuohifpjoe",
        "telephone": "123",
        "address": "云南",
        "password": "1",
        "image": "iosadj",
        "creat": null,
        "birthday": "2002-10-20",
        "pid": 0
      },],
      options: [
        {
          value: 'Beijing',
          label: '北京'
        },
        {
          value: 'Tianjin',
          label: '天津'
        },
        {
          value: 'Hebei',
          label: '河北'
        },
        {
          value: 'Shanxi',
          label: '山西'
        },
        {
          value: 'Inner Mongolia',
          label: '内蒙古'
        },
        {
          value: 'Liaoning',
          label: '辽宁'
        },
        {
          value: 'Jilin',
          label: '吉林'
        },
        {
          value: 'Heilongjiang',
          label: '黑龙江'
        },
        {
          value: 'Shanghai',
          label: '上海'
        },
        {
          value: 'Jiangsu',
          label: '江苏'
        },
        {
          value: 'Zhejiang',
          label: '浙江'
        },
        {
          value: 'Anhui',
          label: '安徽'
        },
        {
          value: 'Fujian',
          label: '福建'
        },
        {
          value: 'Jiangxi',
          label: '江西'
        },
        {
          value: 'Shandong',
          label: '山东'
        },
        {
          value: 'Henan',
          label: '河南'
        },
        {
          value: 'Hubei',
          label: '湖北'
        },
        {
          value: 'Hunan',
          label: '湖南'
        },
        {
          value: 'Guangdong',
          label: '广东'
        },
        {
          value: 'Guangxi',
          label: '广西'
        },
        {
          value: 'Hainan',
          label: '海南'
        },
        {
          value: 'Chongqing',
          label: '重庆'
        },
        {
          value: 'Sichuan',
          label: '四川'
        },
        {
          value: 'Guizhou',
          label: '贵州'
        },
        {
          value: 'Yunnan',
          label: '云南'
        },
        {
          value: 'Tibet',
          label: '西藏'
        },
        {
          value: 'Shaanxi',
          label: '陕西'
        },
        {
          value: 'Gansu',
          label: '甘肃'
        },
        {
          value: 'Qinghai',
          label: '青海'
        },
        {
          value: 'Ningxia',
          label: '宁夏'
        },
        {
          value: 'Xinjiang',
          label: '新疆'
        },
        {
          value: 'Hong Kong',
          label: '香港'
        },
        {
          value: 'Macau',
          label: '澳门'
        },
        {
          value: 'Taiwan',
          label: '台湾'
        }
      ],
      dialogFormVisible: false,
      dialogTableVisible: false,
      form: {
        username: '',
        birthday: "",
        telephone: "",
        address: "",
        pid: "",
        password: ""
      },
      formLabelWidth: '120px',
      multipleSelection: [],
      gridData: [{
        "customerID": 12,
        "username": "xuxiao",
        "pid": "0",
        "telephone": "12345678",
        "address": "Inner Mongolia",
        "password": null,
        "image": "https://cdn.xxnn808.top/nat-home/20230504jmmmj8.jpg",
        "creat": "2023-06-30",
        "birthday": "2023-06-07"

      }],
      rules: {
        username: [{required: true, message: "请输入用户名", trigger: "blur"}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}],
        telephone: [{required: true, message: '请输入电话', trigger: 'blur'}],
        address: [{required: true, message: '请输入地址', trigger: 'blur'}],
        pid: [{required: true, message: '请输入身份证号码', trigger: 'blur'}],
        birthday: [{required: true, message: '请输入生日', trigger: 'blur'}],
      }
    }
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.getRequest("/api/user/list").then(resp => {
        if (resp) {
          if (resp.code == 1) {
            this.tableData = resp.data;
          }
        }
      })
    },
    addUser() {
      this.dialogFormVisible = true;
    },
    commit() {
      this.$refs.form.validate((valid) => {
        if (valid) {
          this.postRequest("/api/user", this.form).then(resp => {
            if (resp) {
              if (resp.code == 1) {
                console.log(resp)
                this.dialogFormVisible = false;
                this.initData();
              }
            }
          })
        } else {
          this.$message.error('请输入所有字段！');
        }
      })
    },
    DeleteUserAll() {
      const ids = this.multipleSelection.map(obj => obj.customerID);
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.multipleSelection)
        this.deleteRequest('/api/user', ids).then(resp => {
          if (resp) {
            if (resp.code == 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initData();
            }
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    SelectByName() {
      if (this.select == "") {
        this.$message.error("请输入内容");
      } else {
        this.getRequest(`/api/user/name/${this.select}`).then(resp => {
          if (resp) {
            if (resp.code == 1) {
              this.gridData = resp.data
              console.log(resp.data)
              this.dialogTableVisible = true
            }
          }
        })
      }

    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      this.title = "编辑用户"
      this.getRequest(`/api/user/${row.customerID}`).then(resp => {
        if (resp) {
          if (resp.code == 1) {
            this.form = resp.data
          }
        }
      })
    },
    handleDelete(index, row) {
      let id = []
      id.push(row.customerID)
      this.$confirm('此操作将永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteRequest('/api/user', id).then(resp => {
          if (resp) {
            if (resp.code == 1) {
              this.$message({
                type: 'success',
                message: '删除成功!'
              });
              this.initData();
            }
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    }

  }
}
</script>
<style scoped>
.top {
  display: flex;
  justify-content: space-around;
}
</style>
